<template>
    <div class="css-demo02">

        <ul class="firstBar">
            <li>11</li>
            <li>22
                <ul class="secondBar">
                    <li>23
                        <ul class="thirdBar">
                            <li>24</li>
                            <li>25</li>
                        </ul>
                    </li>
                    <li @click="selectNum">点我</li>
                </ul>

            </li>
            <li>33</li>
            <li>66</li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: "css-demo02",
        data() {
            return {}
        },
        methods: {
            selectNum() {
                alert('111')
            }


        }
    }
</script>

<style lang="scss">

    @mixin li-basic-style {
        position: relative;
        height: 2rem;
        width: 4rem;
        border: 1px solid darkgreen;
        background-color: white;

        &:hover {
            background: darkred;
            overflow: visible;
        }

        overflow: hidden;
    }

    @mixin ul-basic-style {
        position: absolute;
        top: 0;
        left: 30px;

    }

    .css-demo02 {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #999999;

        ul li {
            padding: 0;
            margin: 0;
        }

        .firstBar {
            height: 2rem;
            list-style: none;
            overflow: hidden;

            &:hover {
                overflow: visible;
            }

            li {
                @include li-basic-style;

                .secondBar {
                    @include ul-basic-style;

                    li {
                        @include li-basic-style;

                        .thirdBar {

                            @include ul-basic-style;
                        }
                    }

                }
            }

        }


    }
</style>
